<template>
  <view  :style="{ 'top':  top + '%' }" class="recommend">
        <view class="recommend-tip">
            <view class="title">更多推荐</view>
            <view class="info">本小程序仅供娱乐提供</view>
        </view>
        <fui-search-bar background="#fff"  :placeholder="placeholder"    @search="search"></fui-search-bar>
    <view class="Works-list" v-for="item in items">
        <Works id="" :red="item.red" :title="item.title" :inUser="false" :info="item.info" :iamge="item.iamge" :url="item.url"/>
    </view>
    <!-- <fui-loadmore></fui-loadmore> -->
    <fui-divider text="没有更多了"></fui-divider>
  </view>
</template>

<script setup lang="ts">
import Works from "@/components/Works/Works.vue";
interface IProps {
    top:number
}
const props = withDefaults(defineProps<IProps>(), {})
const placeholder = ref("搜一搜你感兴趣的产品~")
const searchContent = ref()
const items = computed(()=>{
    if(searchContent.value){
        return dataList.value.filter(item => {
            return item.title.includes(searchContent.value);
        });
    }
    return dataList.value.reverse()
})

const dataList = ref([
    {
        title:"AI宝宝身高预测",
        info:"什么?孩子身高竟超过某球星?",
        iamge:"https://p.qqan.com/up/2021-7/16272658316539549.jpg",
        url:'/subPackages_play/bodyHeight/bodyHeight',
        red:843
    },
    {
        title:"答案之书",
        info:"网络AI神婆,一测一个准",
        iamge:"https://ts1.cn.mm.bing.net/th/id/R-C.ff91aab1228e843573b5739956481563?rik=%2fNySD2Tgz4LiLA&riu=http%3a%2f%2fimg.touxiangwu.com%2fuploads%2fallimg%2f2022053119%2f14fnyhlqalz.jpg&ehk=30Lb1jqPdFDG%2fZ1xMpamh7viMODi7zLU3AxWEKOXs7k%3d&risl=&pid=ImgRaw&r=0",
        url:'/subPackages_play/answers/answers',
        red:2143
    },
    {
        title:"AI姓名谐音梗",
        info:"宁干嘛!嗨嗨呦",
        iamge:"https://tupian.qqw21.com/article/UploadPic/2020-11/202011222253412587.jpg",
        url:'/subPackages_play/homophonic/homophonic',
        red:1193
    },
    {
        title:"退休金计算",
        info:"震惊!测试出老年巴菲特?",
        iamge:"https://img2.baidu.com/it/u=4170205233,4017980867&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=504",
        url:'/subPackages_play/fund/fund',
        red:714
    },
    {
        title:"金额大小写转换",
        info:"妈妈!再也不担心我不会金额大小写了",
        iamge:"https://img0.baidu.com/it/u=106317073,3734062071&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500",
        url:'/subPackages_play/money/money',
        red:598
    },
    {
        title:"BMI指数计算",
        info:"看自己BMI,拍出自己的清淡滚烫",
        iamge:"https://img2.baidu.com/it/u=2935165599,1655522538&fm=253&fmt=auto&app=138&f=JPEG?w=501&h=500",
        url:'/subPackages_play/bmi/bmi',
        red:1098
    },
    {
        title:"生日解密",
        info:"什么!?我的身份竟然是宿主?激活系统",
        iamge:"https://img2.baidu.com/it/u=4088284713,1109244362&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400",
        url:'/subPackages_play/birthday/birthday',
        red:3098
    },
    {
        title:"生肖匹配",
        info:"12生肖中只有龙现实没有,原因竟是.....",
        iamge:"https://img1.baidu.com/it/u=4139731686,2595802658&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
        url:'/subPackages_play/twelveAnimals/twelveAnimals',
        red:3258
    },
    {
        title:"苹果序列号",
        info:"一键揭晓苹果机信息",
        iamge:"https://img2.baidu.com/it/u=2783919177,48468125&fm=253&fmt=auto&app=138&f=JPEG?w=499&h=500",
        url:'/subPackages_play/appleID/appleID',
        red:8051
    },
    {
        title:"情侣姓氏谐音梗网名",
        info:"原来一切都是命中注定.....",
        iamge:"https://img0.baidu.com/it/u=3240195272,3945030239&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400",
        url:'/subPackages_play/loveName/loveName',
        red:6908
    },
    {
        title:"成语接龙",
        info:"自从用了都没有输过",
        iamge:"https://img0.baidu.com/it/u=2998045569,3452611742&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400",
        url:'/subPackages_play/idiom/idiom',
        red:9818
    },
    {
        title:"宝宝名字生成",
        info:"好听",
        iamge:"https://img1.baidu.com/it/u=2621373426,3600606788&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400",
        url:'/subPackages_play/babyName/babyName',
        red:7815
    },
    {
        title:"营销号文案生成",
        info:"注意看...",
        iamge:"https://img2.baidu.com/it/u=2465544159,3904539622&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400",
        url:'/subPackages_play/marketing/marketing',
        red:1318
    },
    {
        title:"摩斯密码翻译",
        info:"... .. ... ....",
        iamge:"https://img1.baidu.com/it/u=54988317,3083333071&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=363",
        url:'/subPackages_play/password/password',
        red:34409
    },
    {
        title:"中式12星座",
        info:"属于中式的浪漫",
        iamge:"https://img0.baidu.com/it/u=1768099514,1295258277&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500",
        url:'/subPackages_play/constellation/constellation',
        red:94092
    },
    {
        title:"文案生成器",
        info:"文案生成器",
        iamge:"https://img2.baidu.com/it/u=396436058,219850851&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
        url:'/subPackages_play/copywriting/copywriting',
        red:20409
    },
    {
        title:"名字福气测试",
        info:"你的名字隐藏多少福气",
        iamge:"https://img0.baidu.com/it/u=3384170653,3749769369&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
        url:'/subPackages_play/goodFortune/goodFortune',
        red:17195
    },
    {
        title:"生日花",
        info:"你的生日代表的花朵和寓意",
        iamge:"https://img2.baidu.com/it/u=484991634,2354711098&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
        url:'/subPackages_play/flower/flower',
        red:10216
    },
    {
        title:"测试未来另一半的名字",
        info:"转角遇到爱",
        iamge:"https://wx2.sinaimg.cn/mw690/007QvzfIly1ho2zu7m1n9j30sg0sgtrv.jpg",
        url:'/subPackages_play/futureName/futureName',
        red:327427
    },
    {
        title:"未来的她/他",
        info:"测试未来另一半什么时候出现",
        iamge:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202004%2F15%2F20200415174211_M4NXt.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1716730940&t=402dae1c2c3149c35457672bc2b4ae58",
        url:'/subPackages_play/trajectory/trajectory',
        red:158120
    }

])
const search = (e:any)=>{
    // uni.showToast({
    //     title:'没有更多内容，请换个提示词',
    //     icon:'none'
    // })
    searchContent.value = e.detail.value
}

</script>

<style lang="scss" scoped>
.recommend{
    position: absolute;
    z-index: 200;
    width: 100%;
    background: white;
    border-radius:35rpx 35rpx 0 0;
    
    .recommend-tip{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20rpx;
        .title{
            font-weight: bolder;
        }
        .info{
            font-size: 26rpx;
            color:$uni-text-color-placeholder;
        }
    }
    .Works-list{
        padding: 20rpx;
    }
}
</style>
